<template>
  <el-dialog
    class="upload-history-model"
    :title="title"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(800)"
    :before-close="handleCancel">
    <div class="content">
      <slot v-if="$slots.table" name="table"></slot>
      <template v-else>
        <el-table
          class="table-content"
          v-loading="loading"
          element-loading-custom-class="custom-load"
          :data="tableData"
          style="width: 100%">
          <el-table-column prop="file_name" label="计划名称"></el-table-column>
          <el-table-column prop="upload_time" label="上传时间">
            <template slot-scope="scope">
              {{ scope.row.upload_time
              ? $moment(scope.row.upload_time).format('yyyy-MM-DD HH:mm:ss')
              : ''
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <span class="download btn"  @click="hanldeDownload(scope.row)">下载</span>
              <span class="btn" @click="hanldeDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: {
    title: {
      type: String,
      default: '历史记录'
    },
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageNo: {
      type: Number,
      default: 1
    },
    deleteFn: {
      type: Function,
      default: null
    },
    handleSizeChange: {
      type: Function,
      default: () => () => {}
    },
    handleCurrentChange: {
      type: Function,
      default: () => () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    // 删除文件
    hanldeDelete(row) {
      if (typeof this.deleteFn === 'function') {
        this.deleteFn(row);
      }
    },
    /**
     * 计划列表下载
     * @param row {Object}
     */
    hanldeDownload(row) {
      if (!row.url) {
        this.$message.warning('下载地址失效');
        return;
      }
      window.open(this.$checkUrl(row.url));
    },
    handleCancel() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';
  .upload-history-model {
    .download {
      margin-right: 10px;
    }
    .btn {
      cursor: pointer;
      color: $mainColor;
    }
    .table-content {
      /deep/ .el-table__body-wrapper {
        min-height: 300px;
        max-height: 500px;
        overflow-y: auto;
      }
    }
  }
</style>
